import { Card, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { getLoginUserInfo } from 'apis/common';
import dayjs from 'dayjs';
import Password from './Password';
import Edit from './Edit';

export default function () {
    const [userInfo, setUserInfo] = useState({});
    const [passwordVisible, setPasswordVisible] = useState(false);
    const [editVisible, setEditVisible] = useState(false);
    const [loading, setLoading] = useState(true);
    const [infoData, setInfoData] = useState({});

    const getUserInfo = () => {
        getLoginUserInfo({}).then((res) => {
            console.log(res);
            setUserInfo(res);
            setLoading(false);
        });
    };
    // 初始化数据
    useEffect(() => {
        getUserInfo();
    }, []);

    return (
        <div style={{ width: '100%', minHeight: '600px' }}>
            <Card bordered={false} style={{ width: '100%' }}>
                {loading ? (
                    <Spin />
                ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', color: '#575757' }}>
                        <div style={{ fontSize: '18px', color: 'black' }}>
                            {userInfo.name}
                            <a
                                onClick={() => {
                                    setInfoData({ name: userInfo.name, sex: userInfo.sex });
                                    setEditVisible(true);
                                }}
                                style={{ marginLeft: '6px', textDecoration: 'underline', fontSize: '14px' }}
                            >
                                修改
                            </a>
                        </div>
                        <div>性别：{userInfo.sex ? (userInfo.sex === 1 ? '男' : '女') : '暂未设置'}</div>
                        <div>登录账号：{userInfo.userName}</div>
                    </div>
                )}
            </Card>
            <Card title='详细信息' bordered={false} style={{ width: '100%', marginTop: '20px' }}>
                {loading ? (
                    <Spin />
                ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', color: '#575757' }}>
                        <div>
                            密码：******{' '}
                            <a
                                onClick={() => setPasswordVisible(true)}
                                style={{ marginLeft: '6px', textDecoration: 'underline' }}
                            >
                                修改
                            </a>
                        </div>
                        <div>
                            所属角色：
                            {userInfo.roles ? userInfo.roles.map((item) => item.roleName).join(',') : '暂未设置'}
                        </div>
                        <div>
                            {userInfo.mobile ? (
                                <span>
                                    手机号：{userInfo.mobile}
                                    {/* <a style={{ marginLeft: '6px', textDecoration: 'underline' }}>修改</a> */}
                                </span>
                            ) : (
                                <span>
                                    手机号：暂未设置
                                    {/* <a style={{ marginLeft: '6px', textDecoration: 'underline' }}>设置</a> */}
                                </span>
                            )}
                        </div>
                        <div>
                            所属机构：
                            {userInfo.roles
                                ? userInfo.roles.map((item) => item.organizationFullName).join(',')
                                : '暂未设置'}
                        </div>
                        <div>
                            所属租户：
                            {userInfo.tenants ? userInfo.tenants.map((item) => item.tenantName).join(',') : '暂未设置'}
                        </div>
                        <div>
                            最后登录时间：
                            {userInfo.lastLoginTime
                                ? dayjs(Number(userInfo.lastLoginTime)).format('YYYY-MM-DD HH:mm:ss')
                                : ''}
                        </div>
                    </div>
                )}
            </Card>
            <Password visible={passwordVisible} setVisible={setPasswordVisible} />
            <Edit infoData={infoData} visible={editVisible} setVisible={setEditVisible} refresh={getUserInfo} />
        </div>
    );
}
